---
title: <SessionsCard />
---

The `<SessionsCard />` component provides users with an intuitive interface for viewing and managing their active authentication sessions. Users can easily revoke active sessions, enhancing security by maintaining control over their account access across multiple devices and browsers.

<img alt="Sessions Card" src="/screenshots/sessions-card-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
<img alt="Sessions Card" src="/screenshots/sessions-card-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />

## Usage

Include the `<SessionsCard />` component within your account settings page or security settings page:

```tsx
import { SessionsCard } from "@daveyplate/better-auth-ui"

export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <SessionsCard />
        </div>
    )
}
```

## Reference

Below are the available props for customizing `<SessionsCard />`:

<AutoTypeTable path="../src/components/settings/security/sessions-card.tsx" name="SessionsCardProps" />

## Styling

You can customize the appearance of `<SessionsCard />` using Tailwind CSS classes provided via the `classNames` prop:

```tsx
<SessionsCard
    classNames={{
        base: "border-blue-500",
        header: "bg-blue-50",
        title: "text-xl text-blue-600",
        description: "text-muted-foreground",
        content: "bg-background space-y-3",
        footer: "bg-blue-300",
        button: "bg-blue-600 hover:bg-blue-700 text-white"
    }}
/>
```

## Localization

The text within `<SessionsCard />` can be customized through the `localization` prop, allowing you to adapt it to different languages or contexts:

```tsx
<SessionsCard
    localization={{
        SESSIONS: "Active Devices",
        SESSIONS_DESCRIPTION: "Review and revoke access from active devices and sessions.",
        CURRENT_SESSION: "This Device",
        REVOKE: "Remove Access"
    }}
/>
```

---